import React,{useState,useEffect} from 'react';
// 基于模块化
// 组件化
// 函数组件(属性、状态、生命周期)
// 函数组件里没有this.xxx
// 状态是组件内私有的
const Left = (props)=>{
    const [num,setNum] = useState(0);
    const [newsList,setNewsList] = useState([]);
    
    useEffect(()=>{
        console.log('effect')
        return ()=>{
            console.log('unmount');
        }
    },[num])
    useEffect(()=>{
        // newsType=&newsTitle=&page=1
        fetch('http://8.142.171.141:8080/school-news/news/pageList')
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
                setNewsList(res.data.content)
            })
    },[])
    
    return <div style={{width: 200}}>
        left <b>{props.title}</b>
        <ul>
            {
                newsList.map(item=>{
                    return <li key={item.id}>
                        {item.newsTitle}
                    </li>
                })
            }
        </ul>
        <h2>{num}</h2>
        <button onClick={()=>setNum(num+1)}>点击+1</button>
    </div>
}
const Right = ()=><div>Right</div>

const App = ()=>{
    const style = {display: 'flex'};
    const [showLeft,setShowLeft] = useState(true)
    const toggleLeft = ()=>{
        setShowLeft(!showLeft)
    }
    return (
        <div>
            <h2>app</h2>
            <button onClick={toggleLeft}>隐藏Left</button>
            <div style={style} className='box'>
                {showLeft && <Left title='left' />}
                {/* {showLeft?<Left />:null} */}
                <Right />
            </div>
        </div>
    )
}

export default App;

// js框架：
// 单页应用(SPA)、组件化
// 移动Web开发(web网站)
// React  Vue  Angular

// Hybrid混合开发(App)
// react native uniapp  ionic
// flutter(dart)